<template>
  <div class="plan-list">
<!--    <Editormd></Editormd>-->
    <Markdown/>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import CloseNavigation from '@/components/CloseNavigation.vue';
import TaskInfo from '@/views/todo/TaskInfo.vue';
import TodoNavigationNew from '@/components/taskandtodo/TodoNavigationNew.vue';
import Editormd from "@/components/note/EditorMd.vue";
import Markdown from 'vue-meditor';


@Component({
  components: {
    CloseNavigation,
    TaskInfo,
    TodoNavigationNew,
    Markdown,
    Editormd
  },
})
export default class Home extends Vue {
  // @Getter @Action 在vuex-class 包内
  // 这里使用 ！ 是说明 属性不会为undefined 否则需要进行初始化操作
  // @Getter
  // public getToken !: string;
  //
  // @Action('setToken')
  // public setToken !: Function;
  private calendarValue: any = new Date();

  private count:number = 0;

  public load():void {
    this.count++;
  }
}
</script>
<style lang="scss">
.plan-list {
  float: left;
  height: 100%;
  width: 100%;
  .plan-list-title {
    border-bottom: 1px solid #e5e2e2;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    .plan-list-title-item {
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .plan-list-main {
    //border: 1px solid red;
    height: 100%;
    overflow-y: auto;
    .plan-list-item-container {
      float: left;
      display: inline-block;
      .plan-list-main-item {
        display: inline-block;
        width: 170px;
        height: 170px;
        margin: 15px;
        background-color: #bbc4cc;
        cursor: pointer;
        padding: 5px;

        .plan-item-tile {
          height: 30px;
          line-height: 30px;
          color: #fff;
          font-size: 16px;
        }
        .plan-item-desc {
          height: 105px;
          padding: 5px 0;
          text-align: center;

          .plan-person {
            display: inline-block;
            //float: left;
            margin: 0 8px 8px 0;
            .mu-avatar img {
              box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)
            }

            .mu-avatar img:hover {
              box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
            }
          }
        }
        .plan-item-bottom {
          height: 30px;
          border-top: 1px solid rgb(255, 255, 255);
          text-align: center;
          font-size: 12px;
          line-height: 26px;
          color: #ffffff;
        }
      }
      .plan-list-main-item:hover {
        box-shadow: 0 6px 6px -3px rgba(0,0,0,.2), 0 10px 14px 1px rgba(0,0,0,.14), 0 4px 18px 3px rgba(0,0,0,.12);
      }
    }
  }
}
</style>
